<template>
  <div class="new-page em-monitoring fault-monitoring-box padding-0">
    <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <!-- 筛选条件与查询 -->
      <!-- <a-form-model-item label="" /> -->
      <a-form-model-item label="">
        <airModel v-model="search.model" mode="multiple" :data-source="servftmPlaneModelList" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-select
          v-model="search.fleet"
          show-arrow
          style="minWidth: 120px"
          placeholder="机队"
          mode="multiple"
          :max-tag-count="1"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in servftmFleetListFilter" :key="selectItem.id" :value="selectItem.name">
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 机号 -->
      <a-form-model-item label="">
        <tailNumber v-model="search.tailnumber" value-key="tailnumber" name-key="tailnumber" :data-source="servftmAirplaneListFilter" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-date-picker
          v-model="search.startTime"
          style="width: 120px;min-width: 100%;"
          format="YYYY-MM-DD"
          show-time
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="起始时间"
          :disabled-date="disabledStartDate"
          :get-calendar-container="triggerNode =>triggerNode.parentNode"
        />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-date-picker
          v-model="search.endTime"
          style="width: 120px;min-width: 100%;"
          format="YYYY-MM-DD"
          show-time
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="结束时间"
          :disabled-date="disabledEndDate"
          :get-calendar-container="triggerNode =>triggerNode.parentNode"
        />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-input v-model="search.code" style="width:100%" placeholder="事件代码" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-input v-model="search.description" style="width:100%" placeholder="事件名称" />
      </a-form-model-item>
      <!-- <a-form-model-item label="">
        <a-input v-model="search.ata" style="width:100%" placeholder="请输入ATA" />
      </a-form-model-item>
      <a-form-model-item label="">
        <eventList v-model="search.eventType" :mul="true" width="10%" placeholder="事件类型" />
      </a-form-model-item> -->

      <a-button type="primary" class="ml-8" :loading="faultLoading" @click="searchData">
        查询
      </a-button>
      <a-button type="default" class="ml-8 mr-8" ghost :loading="faultLoading" @click="resetSearchHandler">
        重置
      </a-button>
    </a-form-model>
    <a-config-provider>
      <template #renderEmpty>
        <div style="text-align: center">
          <a-empty :image="simpleImage" description="暂无数据-请手动查询" />
        </div>
      </template>
      <a-table
        class="fault-monitoring-box-table"
        :columns="columns"
        :data-source="data"
        :row-key="(row,index) =>row.description+index"
        :loading="faultLoading"
        :scroll="{ x: 1500}"
        :pagination="pagination"
        @change="changePaginationHandler"
      >
        <a slot="action" slot-scope="text,recode">{{ recode.total }}</a>

      </a-table>
    </a-config-provider>
  </div>
</template>
<script>
// import rowClass from '@/pages/common/rowClass';
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex';
import airModel from '@/pages/components/airModel';
import tailNumber from '@/pages/components/tailNumber';
// import eventList from '@/pages/components/eventList';
import { Empty } from 'ant-design-vue';

const codeTmpHandler1 = function() {
  const scollTop = this.scrollTop;
  document.querySelector('.fault-monitoring-box-table .ant-table-scroll thead').style.transform = `translateY(${scollTop}px)`;
  document.querySelector('.fault-monitoring-box-table .ant-table-fixed-left thead').style.transform = `translateY(${scollTop}px)`;
  document.querySelector('.fault-monitoring-box-table .ant-table-fixed-right thead').style.transform = `translateY(${scollTop}px)`;
};
export default {
  components: {
    airModel,
    tailNumber
    // eventList
  },

  data() {
    return {
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      startTime: '',
      endTime: '',
      search: {},
      data: [
      ],
      pagination: {
        showQuickJumper: true,
        current: 1,
        pageSize: 10
      },
      columns: []
    };
  },
  computed: {
    ...mapGetters('setting', ['sideMenuWidth']),
    ...mapState('faultMonitoring', [
      'historyFault',
      'faultLoading',
      'historyEventCountDetail'
    ]),
    ...mapState('fraMonitoring', [
      'servftmFleetListFilter',
      'servftmPlaneModelList',
      'servftmAirplaneListFilter',
      'ftmAirlineList',
      'ftmAirplaneList'
    ]),
    baseNum() {
      const { current, pageSize } = this.pagination;
      const base = (current - 1) * pageSize;
      return base;
    }
  },
  created() {
    this.getFtmAirplaneListFilterserv();
    this.getFtmPlaneModelListFilterServ();
    this.getFtmFleetFilterServ();
    this.$set(this.search, 'endTime', this.$moment.utc(new Date()).format('YYYY-MM-DD HH:mm:ss'));
    this.$set(this.search, 'startTime', this.$moment.utc(new Date()).add(-7, 'day').format('YYYY-MM-DD HH:mm:ss'));

    this.setState({ key: 'historyFault', payload: [] });
    this.setState({ key: 'faultLoading', payload: false });
  },
  methods: {
    ...mapActions('faultMonitoring', [
      'getHistoryEventCount',
      'getHistoryEventCountDetail'
    ]),
    ...mapMutations('faultMonitoring', ['setState']),
    ...mapActions('fraMonitoring', [
      'getSummaryItems',
      'getFtmAirplaneListFilterserv', // 机号
      'getFtmPlaneModelListFilterServ', // 机型
      'getFtmFleetFilterServ' // 机队
    ]),

    searchData() {
      this.data = [];
      this.columns = [
        { title: '事件代码',
          width: 175,
          dataIndex: 'code',
          fixed: 'left',
          customRender: (value, record, index) => {
            return record.code || '--';
          }
        },
        { title: '事件名称',
          width: 400,
          dataIndex: 'description',
          fixed: 'left',
          customRender: (value, record, index) => {
            return record.description || '--';
          }
        },
        {
          title: 'total',
          fixed: 'right',
          dataIndex: 'total',
          width: 85,
          customRender: (value, record, index) => {
            const dataIndex = this.baseNum + index;
            const count = this.historyFault.reduce((a, b) => {
              return a + b.events[dataIndex].count;
            }, 0);

            return count;
          }
        }
      ];
      this.fristGetData();
    },
    disabledStartDate(startValue) {
      const endValue = this.search.endTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > new Date(endValue).getTime().valueOf();
    },

    disabledEndDate(endValue) {
      const startValue = this.search.startTime;
      if (!endValue || !startValue) {
        return false;
      }
      return new Date(startValue).getTime().valueOf() >= endValue.valueOf();
    },
    changePaginationHandler(pagination) {
      this.pagination.current = pagination.current;
    },
    async fristGetData() {
      await this.getHistoryEventCount(this.search);
      const spliceColumns = [];

      const l = ((document.querySelector('.ant-table-body').clientWidth - 400 - 85) / 85) > this.historyFault.length;
      this.historyFault.forEach((item, itemIndex) => {
        const columnsObj = {
          title: item.tailnumber,
          dataIndex: 'th' + itemIndex,
          width: l ? 'auto' : 85,
          customRender: (value, record, index) => {
            const dataIndex = this.baseNum + index;
            const count = item.events[dataIndex].count;
            if (count > 0) {
              return <a class='tn-text-ul' onClick={() => this.getDetailsHandler(item.tailnumber, record.code, record.type)}>{count}</a>;
            } else {
              return <span class='text-color-9ea5b2'>{count}</span>;
            }
          }
        };
        spliceColumns.push(columnsObj);
      });

      this.columns.splice(2, 0, ...spliceColumns);
      this.data = this.historyFault[0].events;

      this.$nextTick(() => {
        const table = document.querySelector('.fault-monitoring-box');
        table.addEventListener('scroll', codeTmpHandler1);
      });
    },
    getDetailsHandler(tailNumber, code, type) {
      this.setState({ key: 'detailsVisible', payload: true });
      localStorage.setItem('fRow', JSON.stringify({ tailNumber, code, type }));
    },
    resetSearchHandler() {
      this.search = {};
      this.pagination.current = 1;
      this.$set(this.search, 'endTime', this.$moment.utc(new Date()).format('YYYY-MM-DD HH:mm:ss'));
      this.$set(this.search, 'startTime', this.$moment.utc(new Date()).add(-7, 'day').format('YYYY-MM-DD HH:mm:ss'));
      this.searchData();
    }
  }
};
</script>
<style lang="less" scoped>
.service-information-btn-box{
  width: 214px!important
}
@media screen and (max-width: 1680px) {
  .service-information-main{
    .ant-row:not(.service-information-btn-box)  {
      width: 14%!important
    }
  }
}
@media screen and (max-width: 1440px) {
  .service-information-main{
    .ant-row:not(.service-information-btn-box)  {
        width:13.5%!important
    }
  }
}
.tn-text-ul{

    font-weight: 600;
}
.fault-monitoring-box{
  .comm-search-f{
.ant-select {
  min-width: 100%!important;
}
  }
}

</style>
